<template>
  <div class="line" v-if="reload" id="dark-linecharts"></div>
</template>

<script>
import * as echarts from 'echarts';
import { queryBathPushData } from '@/api/serve';
import json from './theme';

const data = {

};

export default {
  name: 'LineCharts',
  props: {
    // xAxis: {
    //   type: Array,
    //   default: () => {
    //     return [];
    //   }
    // }
  },
  data() {
    return {
      reload: true,
      xKey: [],
      name: [],
      data: [],
      selected: {}
    };
  },
  methods: {
    async queryBathPushData({ eventId, h, start, end }) {
      const res = await queryBathPushData({ eventId, h, startTime: start, endTime: end });
      this.dataFormat(res.data || data);
    },
    async refresh({ eventId, h, start, end }) {
      await this.queryBathPushData({ eventId, h, start, end });
      this.reload = false;
      this.$nextTick(() => {
        this.reload = true;
        this.init();
      });
    },
    dataFormat(data) {
      this.xKey = Object.keys(data);
      const value = Object.values(data);

      const num = value.map(e => e.length);
      const maxNum = Math.max(...num);
      const labelValue = value.find(e => e.length == maxNum);
      this.name = labelValue.map(e => {
        return e.source;
      }).filter(e => e);

      this.name.forEach(e => {
        if (e != '舆情指数') this.selected[e] = false;
      });

      console.log(this.selected, 'this.selected');

      const newData = {};
      value.forEach((e, i) => {
        const nowName = e.map(e => e.source);
        const filterName = this.name.filter(e => !nowName.includes(e)).map(e => {
          return {
            source: e,
            number: 0
          };
        });
        newData[this.xKey[i]] = e.concat(filterName);
      });

      const valueFilter = Object.values(newData).reduce((acc, cur) => {
        return acc.concat(cur);
      }, []);

      const dataKey = {};
      this.name.forEach(e => {
        const findData = valueFilter.filter(m => m.source == e);
        dataKey[e] = findData.map(e => (e.number || e.number === 0) ? Number(e.number) : null);
      });
      console.log(dataKey, 'dataKey');
      this.data = this.name.map(e => {
        return {
            name: e,
            type: 'line',
            data: dataKey[e]
            // smooth: true
          };
      });
      console.log(this.data);
    },
    init() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('dark-linecharts');
        echarts.registerTheme('dark', json);
        const myChart = echarts.init(chartDom, 'dark');

        const option = {
          tooltip: {
            trigger: 'axis'
            // formatter: function(data) {
            //   console.log(data);
            //   var res = data[0].seriesName + '<br/>';
            //   // data.forEach(e => {
            //   //   if (e.data != undefined && e.data != null && e.data != '') { res += e.marker + e.seriesName + '：' + e.data + '<br/>'; };
            //   // });
            //   return res;
            // }
          },
          legend: {
            data: this.name,
            bottom: '0%',
            right: '0%',
            icon: 'roundRect',
            itemGap: 12,
            width: '100%',
            selected: this.selected
          },
          grid: {
            top: '8%',
            left: '6%',
            right: '4%',
            bottom: '55%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.xKey,
            interval: 0,
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
                show: false // 不显示网格线
            }
            // show: false
          },
          darkMode: true,
          series: this.data
        };

        option && myChart.setOption(option);
      });
    }
  },
  mounted() {
    // this.refresh();
  }
};
</script>

<style scoped>
  .line {
    height: inherit;
  }
</style>
